<template>
	<view class="feedback">

		<view class="box">
			<view class="box1">
				<text></text>
			</view>

			<view class="box2">
				<text></text>
			</view>
		</view>

		<view v-for="(item,index) in FeedbackList" :key="index">

			<view class="tousu">
				<text>{{item.typeText}}</text>
			</view>

			<view class="time">
				<text>{{item.createdTime}}</text>
			</view>

			<view class="feed">
				<text>您的姓名:</text>
				<text>{{item.memberName}}</text>
			</view>

			<view class="feed">
				<text>您的房间号:</text>
				<text>{{item.uniqueCode}}</text>
			</view>

			<view class="feedtext">
				<text>您的{{item.typeText}}内容</text>
			</view>

			<view class="feedcontent">
				<!-- <text>{{item.content}}</text> -->
				<textarea maxlength="300" type="text" v-model="item.content" disabled="true"></textarea>
			</view>

		</view>
		<button class="anniu" @click="feedclose()">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',

				FeedbackList: [{
					id: '', //建议序号
					memberId: '', //用户id
					memberName: '', //用户
					memberType: '', //用户序号
					uniqueCode: '', //用户房间号
					content: '', //建议
					type: '', //投诉序号
					typeText: '', //投诉
					createdTime: '', //时间
				}]

			}
		},
		onLoad(option) {
			this.id = option.id//根据id选择
			this.feedbackInfo();//获取数据
		},
		methods: {
			
			//绑定显示唯一id
			async feedbackInfo() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/suggestion/suggestions?id=' + this.id,
						method: "get",
					})
				this.FeedbackList = res.body.suggestions.data
			},
			
			//跳转
			feedclose() {
				uni.navigateBack({
					url: "/pages/feedbackSuggestions/index"
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ebeff6;
	}

	.feedback {
		width: 94%;
		height: 980rpx;
		margin: 0 auto;
		box-shadow: 8rpx 8rpx 8rpx 12rpx #CCCCCC;
		background-color: #FFFFFF;
		// background: url('/static/image/shapeCombination@2x.png') no-repeat;
	}

	.tousu {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 44rpx;
	}

	.time {
		width: 100%;
		height: 88rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.feed {
		display: flex;
		// margin-top: 24rpx;

		text {
			width: 184rpx;
			font-size: 32rpx;
			// border: 1rpx solid;
			margin-left: 24rpx;
		}
	}

	.feedtext {
		width: 100%;
		margin-top: 24rpx;

		text {
			// border: 1rpx solid;
			margin-left: 24rpx;
			font-size: 32rpx;
		}
	}

	.feedcontent {
		textarea {
			width: 90%;
			height: 468rpx;
			align-items: center;
			// border: 1rpx solid;
			margin-top: 12rpx;
			margin-left: 44rpx;
			font-size: 32rpx;
		}
	}

	.anniu {
		width: 184rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin-top: 44rpx;
		outline: none;
		background-color: #da422a;
		color: #FFFFFF;
	}

	.box {
		display: flex;
		margin-top: 54rpx;
		justify-content: space-around;
		// border: 1rpx solid;
	}

	.box1 {
		margin-top: -34rpx;
		width: 35rpx;
		height: 64rpx;
		opacity: 0.4;
		background-color: #da422a;
		// border: 1rpx solid;
	}

	.box2 {
		margin-top: -34rpx;
		width: 35rpx;
		height: 64rpx;
		opacity: 0.4;
		background-color: #da422a;
		// border: 1rpx solid;
	}
</style>
